<template>
	<view class="music-head" :style="{color : color}">
		<view class="music-head-icon colorBlue" v-if="icon">
			<text @tap="handleToBack" class="iconfont icon-fanhui"></text> | 
			<text @tap="handleTohome" class="iconfont icon-shouye"></text>
		</view>
		<text>{{title}}</text>
	</view>
</template>

<script>
	export default {
		name:"musicHead",
		props :['title','icon','color','iconblack'],
		data() {
			return {
				
			};
		},
		methods:{
			handleToBack(){
				uni.navigateBack()
			},
			handleTohome(){
				console.log(111);
				uni.navigateTo({
					url:'/pages/index/index'
				})
			},
			getTabBarHeight(){
				console.log(wx.getSystemInfoSync());
			}
		},
		onLoad() {
			this.getTabBarHeight()
		}
	}
</script>

<style lang="less" scoped>
.music-head{
	width: 100%;
	height: 75px;
	font-size: 16px;
	line-height: 80px;
	text-align: center;
	position: relative;
	.music-head-icon{
		position: absolute;
		left: 8px;
		top: 4vh;
		width: 90px;
		height: 30px;
		border-radius: 15px;
		background: rgba(0, 0, 0, .4);
		color: white;
		line-height: 30px;
		display: flex;
		justify-content: space-evenly;
	}
}
</style>